<template>
	<div class="business-pattern">
		<p class="bup-title">
			业务格局
		</p>
		<ul class="bp-list">
			<li class="bp-first">
				<div class="bp-img">
					<img src="@/assets/images/icon3.png" />
				</div>
				<p class="bp-title">智慧零售</p>
				<div class="bp-content">
					<p>愿成为中国创新</p>
					<p>智慧零售服务商</p>
				</div>
				<router-link to="/business/7" class="bpf-btn">
					了解更多 >
				</router-link>
			</li>
			<li class="bp-first bp-secend">
				<div class="bp-img">
					<img src="@/assets/images/icon2.png" />
				</div>
				<p class="bp-title">科技事业</p>
				<div class="bp-content">
					<p>致力于为智慧零售事业</p>
					<p>提供数字化运营支撑</p>
				</div>
				<router-link to="/business/8" class="bpf-btn">
					了解更多 >
				</router-link>
			</li>
			<li class="bp-first bp-three">
				<div class="bp-img">
					<img src="@/assets/images/icon.png" />
				</div>
				<p class="bp-title">金融服务</p>
				<div class="bp-content">
					<p>专业提供零售贷、消费金融</p>
					<p>和供应链金融等增值服务</p>
				</div>
				<router-link to="/business/9" class="bpf-btn">
					了解更多 >
				</router-link>
			</li>
		</ul>
	</div>
</template>

<script>
</script>

<style scoped lang="less">
	.business-pattern{
		width: 1200px;
		margin: 0 auto;
		padding-bottom: 70px;
		.bup-title{
			font-size: 36px;
			color: #333;
			text-align: center;
			padding-top: 70px;
			padding-bottom: 10px;
			font-weight: bold;
			background: url(../../../assets/images/icon5.png) no-repeat 50% 118px;
		}
		.bp-list{
			padding-top: 50px;
			display: table;
			width: 100%;
			.bp-first{
				float: left;
				width: 33%;
				display: inline-block;
				border: 2px solid #fff;
				background: url(../../../assets/images/bg.png);
				background-size: 100% 100%;
				.bpf-btn{
					color: #fff;
					border: 1px solid #fff;
					width: 170px;
					height: 50px;
					margin: 0 auto;
					text-align: center;
					line-height: 50px;
					margin-top: 77px;
					margin-bottom: 60px;
					display: none;
				}
				.bp-title{
					font-size: 30px;
					color: #fff;
					text-align: center;
					padding-top: 80px;
				}
				.bp-content{
					color: #ffff00;
					text-align: center;
					padding-top: 22px;
					font-size: 18px;
					padding-bottom: 40px;
				}
				.bp-img{
					text-align: center;
					padding-top: 65px;
				}
				&:hover{
					background: #e13e25;
					cursor: pointer;
					.bpf-btn{
						display: block;
					}
					.bp-img{
						display: none;
					}
				}
			}
			.bp-secend{
				background: url(../../../assets/images/bg2.png);
				background-size: 100% 100%;
			}
			.bp-three{
				background: url(../../../assets/images/bg3.png);
				background-size: 100% 100%;
			}
		}
	}
</style>